<template>
    <h1>房态维护</h1>
</template>
<script setup lang="ts">
</script>
<style></style>
<template>
    <div>
        <div class="calendar">
            <div class="day" v-for="(day, index) in daysInMonth" :key="index" @click="toggleSelected(day)">
                {{ day }}
            </div>
        </div>
    </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
    setup() {
        const selectedDays = ref([]);
        const daysInMonth = computed(() => {
            // 根据实际月份计算当月的天数
            return Array.from({ length: 30 }, (_, i) => i + 1);
        });

        const toggleSelected = (day) => {
            const index = selectedDays.value.indexOf(day);
            if (index === -1) {
                selectedDays.value.push(day);
            } else {
                selectedDays.value.splice(index, 1);
            }
        };

        return {
            daysInMonth,
            selectedDays,
            toggleSelected,
        };
    },
};
</script>

<style scoped>
/* 样式可以根据你的设计进行自定义 */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.day {
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
}

.day.selected {
    background-color: #e0e0e0;
}
</style>
